<template>
  <div>
   
      <div class="head">
        <router-link tag="div" to="/RecommendView" class="leftbox">
          <svg
            t="1666602398689"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1787"
            width="200"
            height="200"
          >
            <path
              d="M224.45 538.68l575.11-346.21-0.05-68.75-575.03 345.61-0.03 69.35z"
              p-id="1788"
              fill="#ffffff"
            ></path>
            <path
              d="M224.45 538.68l575.08 356.96v-69.52L224.48 469.33l-0.03 69.35z"
              p-id="1789"
              fill="#ffffff"
            ></path>
          </svg>
        </router-link>

        <div class="rightbox">
          <div class="bon">
            <svg
              t="1666602515771"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3006"
              width="200"
              height="200"
            >
              <path
                d="M656.07 492.812a266.713 266.713 0 1 0-284.302 0C176.37 554.853 41.734 748.972 41.734 991.38a31.98 31.98 0 1 0 63.96 0c0-261.276 174.61-458.593 406.466-458.593S918.306 730.743 918.306 991.38a31.98 31.98 0 0 0 63.96 0c0-240.81-133.037-434.288-326.196-498.568zM311.965 266.713a202.753 202.753 0 1 1 202.753 202.754 203.073 203.073 0 0 1-202.753-202.754z"
                p-id="3007"
                fill="#ffffff"
              ></path>
            </svg>
          </div>

          <router-link tag="div" to="/RecommendView" class="bon">
            <svg
              t="1666602620237"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4102"
              width="200"
              height="200"
            >
              <path
                d="M954.058556 493.157863c-43.23264-44.004213-422.432055-429.957449-423.904593-431.429986-4.974291-4.975315-12.541641-7.496741-22.49227-7.496741-8.815783 0-15.785521 2.49789-20.711717 7.424086L66.122465 497.179456l0 8.266267c0 18.583241 6.119371 36.461423 17.232476 50.341548 10.562567 13.193487 24.000624 21.069875 35.945677 21.069875l65.450664 0 0 314.966485c0 55.979966 38.562271 75.842339 71.585385 75.842339 2.1295 0 14.32117-0.169869 90.969874-0.169869s70.608128-75.43711 70.608128-75.43711L417.91467 646.39592c0-9.287527 7.496741-16.362666 11.249205-16.362666l48.461735 0 0-40.904619-48.462758 0c-27.782763 0-52.154847 26.759457-52.154847 57.267285l0 245.477854c0 0-1.861394 34.718733-29.751604 34.718733-11.766998 0-89.919962 0.169869-90.920756 0.169869-30.67872 0-30.67872-26.297946-30.67872-34.938744L225.656925 535.952528 121.464911 535.952528c-3.078105-1.87879-11.418051-9.230222-13.795191-22.902616L508.582669 98.130971c52.142567 53.054333 362.372168 368.81081 410.150334 417.437298-0.699941 9.211802-2.52859 13.670348-3.717671 15.657608-0.86367 1.438769-1.606591 2.684132-6.225795 2.684132L804.540218 533.910009l-1.075495 355.077018c-2.52245 8.207939-13.405311 37.604456-39.892569 37.604456 0 0-40.298821 0-75.330686 0s-39.161928-21.097504-39.149649-34.718733c0.079818-84.74408 0.188288-237.419318-0.065492-246.077511-0.245593-8.330736-3.206018-21.429055-10.780531-33.213449-9.723455-15.123442-24.049742-23.454178-40.342824-23.454178l-55.19509 0 0 40.904619 55.19509 0c5.418406 0 10.094916 12.181437 10.235109 16.96437 0.222057 7.557116 0.138146 149.410891 0.048095 244.87615-0.020466 21.3871 0.603751 75.622328 80.055291 75.622328 51.746548 0 75.330686 0 75.330686 0 26.396183 0 48.812729-12.697183 64.826448-36.719296 10.906397-16.35448 14.9679-32.391734 15.395642-34.167171l1.528819-321.79603 63.466474 0c17.935488 0 32.611745-8.020674 41.328267-22.584368 6.597255-11.024078 9.80532-25.65838 9.80532-44.737924l0-8.366551L954.058556 493.157863z"
                p-id="4103"
                fill="#ffffff"
              ></path>
            </svg>
          </router-link>
        </div>
      </div>

      <div class="avatarbox">
        <div class="avatar">
          <svg
            t="1666611751782"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7944"
            width="200"
            height="200"
          >
            <path
              d="M639.318734 362.471428c0-70.606081-57.443293-128.049375-128.049375-128.049375-70.606081 0-128.049375 57.44227-128.049375 128.049375s57.44227 128.049375 128.049375 128.049375C581.874417 490.51978 639.318734 433.077509 639.318734 362.471428z"
              p-id="7945"
              fill="#cdcdcd"
            ></path>
            <path
              d="M829.599452 195.664332c-84.647889-84.647889-197.194174-131.265626-316.904627-131.265626-119.710452 0-232.256738 46.61876-316.90565 131.265626C111.14231 280.313244 64.523549 392.858506 64.523549 512.568958c0 119.709429 46.61876 232.256738 131.265626 316.904627 84.648912 84.649935 197.194174 131.266649 316.90565 131.266649 119.709429 0 232.256738-46.617737 316.904627-131.266649 84.649935-84.647889 131.266649-197.194174 131.266649-316.904627C960.866101 392.858506 914.248364 280.313244 829.599452 195.664332zM732.928738 763.954359c-11.048637 0-20.007683-8.958022-20.007683-20.007683 0-111.192452-90.460268-201.652719-201.652719-201.652719s-201.651696 90.460268-201.651696 201.652719c0 11.048637-8.958022 20.007683-20.007683 20.007683-11.04966 0-20.007683-8.958022-20.007683-20.007683 0-107.004059 69.912279-197.973934 166.45201-229.668797-55.802934-27.762297-94.256734-85.364203-94.256734-151.806451 0-93.447299 76.025511-169.471786 169.471786-169.471786s169.471786 76.025511 169.471786 169.471786c0 66.442248-38.452777 124.045177-94.256734 151.806451 96.53973 31.695886 166.45201 122.664737 166.45201 229.668797C752.936421 754.996336 743.978399 763.954359 732.928738 763.954359z"
              p-id="7946"
              fill="#cdcdcd"
            ></path>
          </svg>
        </div>
        <p>游客</p>
      </div>

      <div class="Record-bookshelf">
        <router-link tag="div" to="/ReadRecord" class="Recordbook">
          <div class="left">
            <div class="img">
              <svg
                t="1666612854541"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11535"
                width="200"
                height="200"
              >
                <path
                  d="M774.4 845.7H190c-11 0-20-9-20-20V148c0-11 9-20 20-20h584.3c11 0 20 9 20 20v677.7c0.1 11.1-8.9 20-19.9 20z m-564.4-40h544.3V168H210v637.7z m0 0"
                  fill="#707070"
                  p-id="11536"
                ></path>
                <path
                  d="M678.3 584.8H286.1c-11 0-20-9-20-20s9-20 20-20h392.2c11 0 20 9 20 20s-9 20-20 20zM442.7 453H291.3c-11 0-20-9-20-20s9-20 20-20h151.4c11 0 20 9 20 20s-8.9 20-20 20z m235.6 263.6H286.1c-11 0-20-9-20-20s9-20 20-20h392.2c11 0 20 9 20 20 0 11.1-9 20-20 20z m2-351c-2.8 0-5.5-0.6-8.1-1.7L604 333.8l-68.3 30.1c-6.2 2.7-13.3 2.1-19-1.6-5.7-3.7-9.1-10-9.1-16.7V148c0-11 9-20 20-20h152.8c11 0 20 9 20 20v197.6c0 11.1-9 20-20.1 20zM603.9 292c2.8 0 5.5 0.6 8 1.7l48.3 21.3V168H547.5v147l48.3-21.3c2.6-1.2 5.4-1.7 8.1-1.7z m0 0"
                  fill="#707070"
                  p-id="11537"
                ></path>
              </svg>
            </div>
            <p>阅读记录</p>
          </div>

          <div class="right">
            <svg
              t="1666612904072"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11827"
              width="200"
              height="200"
            >
              <path
                d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z"
                p-id="11828"
                fill="#707070"
              ></path>
              <path
                d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z"
                p-id="11829"
                fill="#707070"
              ></path>
            </svg>
          </div>
        </router-link>

        <router-link tag="div" to="/TransLation" class="Recordbook">
          <div class="left">
            <div class="img">
              <svg
                t="1666613000810"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="13381"
                width="200"
                height="200"
              >
                <path
                  d="M849.82 732.68l-32.27-124.51-101.64-373.86a32.29 32.29 0 0 0-39.37-22.91l-124.88 32.26A32.3 32.3 0 0 0 528.1 233H205.41a32.26 32.26 0 0 0-32.27 32.25v516.14a32.26 32.26 0 0 0 32.27 32.26H528.1a32.26 32.26 0 0 0 32.27-32.26V523.33l71 265.16a32.27 32.27 0 0 0 32.27 23.87 36.78 36.78 0 0 0 8.39 0l155.86-41.61a32.25 32.25 0 0 0 19.68-15.16 33.81 33.81 0 0 0 2.25-22.91z m-516.3 17.75h-96.81v-64.52h96.81z m0-129h-96.81V427.85h96.81z m0-258.06h-96.81v-64.55h96.81z m161.34 387.06h-96.81v-64.52h96.81z m0-129h-96.81V427.85h96.81z m0-258.06h-96.81v-64.55h96.81z m72.61-56.13l93.58-25.16 16.78 62.26-93.58 25.16zM651 618.82l-50-187.1 93.58-25.16 50 187.1z m32.27 124.51l-16.78-62.26 93.58-25.16 16.79 62.26z"
                  p-id="13382"
                  fill="#707070"
                ></path>
              </svg>
            </div>
            <p>我的书架</p>
          </div>

          <div class="right">
            <svg
            t="1666612904072"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11827"
            width="200"
            height="200"
          >
            <path
              d="M798.38 538.03l-575.1-346.2 0.04-68.75 575.04 345.6 0.02 69.35z"
              p-id="11828"
              fill="#707070"
            ></path>
            <path
              d="M798.38 538.03L223.3 894.99v-69.52l575.06-356.79 0.02 69.35z"
              p-id="11829"
              fill="#707070"
            ></path>
          </svg>
          </div>
          
        </router-link>
      </div>


      <div class="Login-enroll" @click="quitLogin">

        <div tag="div" to="" class="boxs" @click="quitLogin">
          退出登录
        </div>
       
        
      </div>

      <div class="signfooter">
        Copyright@2022七猫小说
      </div>

      


  </div>
</template>

<script>
export default {
methods:{
  quitLogin() {
			// location.reload()
			localStorage.clear()
			window.sessionStorage.clear()
			this.$router.push('/RecommendView')
		},
}
};
</script>

<style lang="scss" >
.container {

  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
  .head {
    display: flex;
    background-color: #222222;
    padding: 10px 14px;
    justify-content: space-between;
    border-bottom: 1px solid #444444;
    .leftbox {
      .icon {
        width: 20px;
        height: 20px;
      }
    }
    .rightbox {
      display: flex;
      .bon {
        margin-left: 16px;
        .icon {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .avatarbox {
    background-color: #222222;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 20px;
    .avatar {
      .icon {
        width: 60px;
        height: 60px;
      }
    }
    p {
      color: #ffffff;
      font-size: 15px;
    }
  }

  .Record-bookshelf{
 

    .Recordbook{
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 18px 14px;
      margin-bottom: 1px;
        .left{
            display: flex;

            .img{
                padding-top:1px ;
                .icon{
                    width:20px;
                    height:20px;
                }
            }
            p{
                font-size: 16px;
                color: #535251;
                padding-left: 4px;
            }
        }

        .right{
            .icon{
            width: 20px;
            height: 20px;
            }
         
        }
    }
  }

  .Login-enroll{
    padding-top: 10px;
    .boxs{
        padding: 16px 0px;
    text-align: center;
    color: #ed434c;
    background-color: #ffffff;
    margin-bottom: 8px;
    }
  }

  .signfooter{
    background-color: #ffffff;
    padding: 28px 0px;
    text-align: center;
    color: #9fa2a3;
    font-size: 10px;

  }


}

* {
  padding: 0;
  margin: 0;
}

ul,
ol {
  list-style: none;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
</style>